<template>
  <div class="tab-container">
    <h1>自定义高级查询</h1>
    <div style="margin-top: 20px">
      <el-input style="width: 100px;" disabled="boolean" value="查询对象:" class="filter-item"/>
      <el-checkbox v-model="checked101" label="商户对象" border size="medium"/>
      <el-checkbox v-model="checked102" label="商品对象" border size="medium"/>
      <el-checkbox v-model="checked103" label="订单对象" border size="medium"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 100px;" disabled="boolean" value="条件字段:" class="filter-item"/>
      <el-checkbox v-model="checked201" label="商户类字段" border size="medium"/>
      <el-checkbox v-model="checked202" label="商品类字段" border size="medium"/>
      <el-checkbox v-model="checked203" label="订单类字段" border size="medium"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 100px;" disabled="boolean" value="排序字段:" class="filter-item"/>
      <el-checkbox v-model="checked301" label="商户类字段" border size="medium"/>
      <el-checkbox v-model="checked302" label="商品类字段" border size="medium"/>
      <el-checkbox v-model="checked303" label="订单类字段" border size="medium"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 100px;" disabled="boolean" value="查询方法:" class="filter-item"/>
      <el-checkbox v-model="checked401" label="显示明细记录" border size="medium"/>
      <el-checkbox v-model="checked402" label="显示汇总数据" border size="medium"/>
      <el-checkbox v-model="checked403" label="显示分组汇总数据" border size="medium"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 100px;" disabled="boolean" value="结果字段:" class="filter-item"/>
      <el-checkbox v-model="checked501" label="商户类字段" border size="medium"/>
      <el-checkbox v-model="checked502" label="商品类字段" border size="medium"/>
      <el-checkbox v-model="checked503" label="订单类字段" border size="medium"/>
    </div>
    <div style="margin-top: 20px">
      <el-input style="width: 100px;" disabled="boolean" value="结果内容:" class="filter-item"/>
      <el-checkbox v-model="checked601" label="显示表格列表数据" border size="medium"/>
      <el-checkbox v-model="checked602" label="显示磁贴照片数据" border size="medium"/>
      <el-button v-waves size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">生成查询结果</el-button>
      <el-button v-waves :loading="downloadLoading" size="mini" class="filter-item" type="success" icon="el-icon-download" @click="handleDownload">导出XLS文件</el-button>
    </div>
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane label="商户类信息" name="first">
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column prop="customerCode" label="商户编号" width="120"/>
          <el-table-column prop="customerName" label="商户名称" width="150"/>
          <el-table-column prop="customerType" label="商户类型" width="100"/>
          <el-table-column prop="customerRink" label="商户等级" width="100"/>
          <el-table-column prop="operateDate" label="开通日期" width="100"/>
          <el-table-column prop="businessSum" label="年订货量" width="100"/>
          <el-table-column prop="belongArea" label="所属地区" width="120"/>
          <el-table-column prop="totalCount" label="累计订货次数" width="120"/>
          <el-table-column prop="totalSum" label="累计订货金额" width="120"/>
          <el-table-column prop="customerState" label="商户状态" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="商品类信息" name="second">
        <el-table :data="tableData2" style="width: 100%">
          <el-table-column prop="productID" label="商品编号" width="120"/>
          <el-table-column prop="productName" label="商品名称" width="120"/>
          <el-table-column prop="productBrand" label="所属品牌" width="120"/>
          <el-table-column prop="productStyle" label="商品款式" width="100"/>
          <el-table-column prop="productColor" label="商品颜色" width="100"/>
          <el-table-column prop="productSize" label="商品尺码" width="200"/>
          <el-table-column prop="stockCount" label="库存总数量" width="100"/>
          <el-table-column prop="prodctPrice" label="预订单价" width="100"/>
          <el-table-column prop="totalSum" label="商品总金额" width="100"/>
          <el-table-column prop="stockDate" label="库存日期" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="订单类信息" name="third">
        <el-table :data="tableData3" style="width: 100%">
          <el-table-column prop="buyNo" label="订单编号" width="120"/>
          <el-table-column prop="CustomerName" label="商户名称" width="150"/>
          <el-table-column prop="productID" label="商品编号" width="120"/>
          <el-table-column prop="productName" label="商品名称" width="120"/>
          <el-table-column prop="productColor" label="商品颜色" width="100"/>
          <el-table-column prop="productSize" label="商品尺码" width="200"/>
          <el-table-column prop="productPrice" label="预订单价" width="100"/>
          <el-table-column prop="buyCount" label="下单数量" width="100"/>
          <el-table-column prop="buySum" label="下单金额" width="100"/>
          <el-table-column prop="buyState" label="订单状态" width="100"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="支付类信息" name="fourth">
        <el-table :data="tableData4" style="width: 100%">
          <el-table-column prop="buyNo" label="订单编号" width="120"/>
          <el-table-column prop="customerName" label="下单商户" width="150"/>
          <el-table-column prop="buyDate" label="下单日期" width="100"/>
          <el-table-column prop="buySum" label="下单金额" width="100"/>
          <el-table-column prop="payDate" label="支付日期" width="100"/>
          <el-table-column prop="paySum" label="支付金额" width="100"/>
          <el-table-column prop="payState" label="支付状态" width="100"/>
          <el-table-column prop="accountDate" label="到账日期" width="100"/>
          <el-table-column prop="accountSum" label="到账金额" width="100"/>
          <el-table-column prop="accountState" label="到账状态" width="100"/>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'Tab2',
  data() {
    return {
      tableData1: [{
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }, {
        customerCode: 'SH093800001',
        customerName: '绍兴金色鞋业商行',
        customerType: '鞋子类商户',
        customerRink: 'A类商户',
        businessSum: '300万-500万',
        belongArea: '浙江省绍兴市',
        totalCount: '35次',
        totalSum: '578.36万',
        operateDate: '2019-01-25',
        customerState: '正常'
      }],
      tableData2: [{
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }, {
        productID: 'XS2635462185',
        productName: '西村明物女鞋',
        productBrand: '西村明物品牌',
        productStyle: '2018年春款',
        productColor: '黑色',
        productSize: '35(1),36(5),37(3),38(2),39(1)',
        stockCount: '12',
        prodctPrice: '799元',
        totalSum: '9588元',
        stockDate: '2019-03-15'
      }],
      tableData3: [{
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }, {
        buyNo: 'DD201900008',
        CustomerName: '宁波太晶鞋业商行',
        productID: 'XS261H505368',
        productName: '西村明物女鞋',
        productColor: '黑色',
        productSize: '35(2),36(3),37(5)',
        productPrice: '599元',
        buyCount: '10',
        buySum: '5990元',
        buyState: '已下单'
      }],
      tableData4: [{
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }, {
        buyNo: 'DD201900008',
        customerName: '宁波太晶鞋业商行',
        buyDate: '2019-01-28',
        buySum: '5990',
        payDate: '2019-02-05',
        paySum: '5990',
        payState: '已支付',
        accountDate: '2019-02-05',
        accountSum: '5990',
        accountState: '已到账'
      }],
      activeName: 'first'
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .tab-container{
    margin: 30px;
  }
</style>
